<template>
    <div id="app">
        <!-- Display connector profile information -->
        <h2>Connector Profile</h2>
        <div v-if="connectorProfile">
            <p>Name: {{ connectorProfile.name }}</p>
            <p>Description: {{ connectorProfile.description }}</p>
            <p>Icon: <img :src="connectorProfile.icon" alt="Connector Icon"></p>
        </div>
        <div v-else>
            <p>Loading connector profile...</p>
        </div>

        <!-- Display each group and its form actions -->
        <h2>Actions</h2>
        <div v-for="(action, actionIndex) in actions" :key="actionIndex">
            <!-- Display group information -->
            <h3>{{ action.group.name }}</h3>
            <div v-for="(item, itemIndex) in action.items" :key="itemIndex">
                <h4>{{ item.name }}</h4>
                <!-- Parse and display form based on inputPresent -->
                <input-form-component :input-present="item.inputPresent" :settings-present="item.settingsPresent"></input-form-component>
                <!-- Display output parameters format -->
                <h5>Output Format:</h5>
                <pre>{{ item.outputPresent }}</pre>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import InputFormComponent from './InputFormComponent.vue';

export default {
    data() {
        return {
            connectorProfile: null,
            actions: null,
            responseData: null
        };
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            axios.get('http://localhost:8080/api/connector-profile/7242229742064156676')
                .then(response => {
                    this.responseData = response.data;
                    this.connectorProfile = this.responseData.data.connectorProfile;
                    this.actions = this.responseData.data.actions;
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }
    },
    components: {
        'input-form-component': InputFormComponent
    }
};
</script>

<style>
/* Add your styles here */
</style>